<template>
  <el-card class="mt-10">
    <el-button type="primary" @click="toAddStatus" :disabled="!category3Id"
      >添加SPU</el-button
    >

    <el-table :data="tableData.records" border class="SPU-table">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column label="SPU名称" prop="spuName" />
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作" #default="{ row }">
        <el-tooltip content="添加SKU" effect="light" placement="top">
          <el-button
            :icon="Plus"
            type="primary"
            size="small"
            @click="toAddSkuHandle(row)"
          ></el-button>
        </el-tooltip>
        <el-tooltip content="修改SPU" effect="light" placement="top">
          <el-button
            :icon="Edit"
            type="primary"
            size="small"
            @click="toEditStatus(row)"
          ></el-button>
        </el-tooltip>
        <el-tooltip content="查看SKU列表" effect="light" placement="top">
          <el-button
            :icon="InfoFilled"
            type="info"
            size="small"
            @click="showSkuList(row)"
          ></el-button>
        </el-tooltip>
        <el-tooltip content="删除SPU" effect="light" placement="top">
          <div class="del-spu">
            <el-popconfirm
              title="你确定要删除吗？"
              @confirm="delSpuHandle(row.id)"
            >
              <template #reference>
                <el-button
                  :icon="Delete"
                  type="danger"
                  size="small"
                ></el-button>
              </template>
            </el-popconfirm>
          </div>
        </el-tooltip>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :currentPage="page"
      :page-size="pageSize"
      :page-sizes="[3, 6, 9]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="`${dialogTitle} ==>SKU列表`"
      width="50%"
      :before-close="handleClose"
    >
      <el-table :data="dialogTable" v-loading="isLoading">
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="价格（元）" prop="price"></el-table-column>
        <el-table-column label="重量（kg）" prop="weight"></el-table-column>
        <el-table-column label="默认图片">
          <template #default="{ row }">
            <img :src="row.skuDefaultImg" alt="img.skName" class="sku-img" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'SPUList',
}
</script>

<script lang="ts" setup>
import { Delete, Edit, Plus, InfoFilled } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'

import { useCategoryId } from '@/stores/categoryId'
import {
  getProductSPU,
  deleteSpuApi,
  findBySpuIdApi,
} from '@/api/product/SPUApi'

import type {
  ProductSPUData,
  SPUParamsType2,
} from '@/api/product/model/SPUType'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['changeCom', 'getSpuInfo'])
// 跳转到添加sku页面
const toAddSkuHandle = (row: SPUParamsType2) => {
  emit('changeCom', 2)
  emit('getSpuInfo', row)
}

//仓库
const categortStore = useCategoryId()
// 提取仓库数据
const { category3Id } = storeToRefs(categortStore)

//分页器参数
const page = ref(1)
const pageSize = ref(3)

// 定义表格数据
const tableData = ref<ProductSPUData>({
  total: 0,
  records: [],
})

// 组件挂在发送请求
onMounted(() => {
  getProductSPUHandle()
})
// 封装发送请求的函数
const getProductSPUHandle = async () => {
  if (categortStore.category3Id) {
    tableData.value = await getProductSPU({
      page: page.value,
      limit: pageSize.value,
      category3Id: categortStore.category3Id as number,
    })
    return
  }
  tableData.value.total = 0
  tableData.value.records = []
}
// 监视数据变化发送请求
watch(category3Id, () => {
  getProductSPUHandle()
})

const handleSizeChange = (curPageSize: number) => {
  //
  pageSize.value = curPageSize
  getProductSPUHandle()
}
const handleCurrentChange = (curPage: number) => {
  page.value = curPage
  getProductSPUHandle()
}
// 进入添加模式
const toAddStatus = () => {
  emit('changeCom', 1)
  emit('getSpuInfo', {
    category3Id: undefined,
    spuName: '',
    tmId: undefined,
    description: '',
    spuSaleAttrList: [],
    spuImageList: [],
  })
}
// 进入编辑模式
const toEditStatus = (row: SPUParamsType2) => {
  emit('changeCom', 1)
  emit('getSpuInfo', row)
}

// 点击删除
const delSpuHandle = async (id: number) => {
  await deleteSpuApi(id)
  ElMessage.success('删除成功')
  getProductSPUHandle()
}

// 点击查看sku列表
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogTable = ref([{}])
const isLoading = ref(false)
const showSkuList = async (row: SPUParamsType2) => {
  // console.log(row)
  dialogVisible.value = true
  dialogTitle.value = row.spuName
  isLoading.value = true
  dialogTable.value = await findBySpuIdApi(row.id as number)
  isLoading.value = false
  // console.log(dialogTable.value)
}
// 关闭对话框
const handleClose = (done: () => void) => {
  done()
  // dialogTable.value = []
}
</script>

<style scoped>
.SPU-table {
  margin: 10px 0 20px;
}
.del-spu {
  display: inline-block;
  margin-left: 10px;
}
.sku-img {
  height: 100px;
}
</style>
<style>
.mt-10 {
  margin-top: 10px;
}
</style>
